<template>
  <div class="nav">
    <div class="nav-my row-center">
      <img :src="store.sender.Avatar" class="nav-my-img" />
    </div>
    <ul class="nav-list">
      <template v-for="item in store.navList" :key="item.id">
        <div @click="tabClick(item.id)" :title="item.name" :class="[
          'nav-item',
          'row-center',
          item.id == store.navId ? 'nav-select' : '',
        ]">
          <n-badge :value="getUnReadCount(item.id)">
            <li :class="['iconfont', item.icon]"></li>
          </n-badge>
        </div>
      </template>
    </ul>
    <div class="close">
      <n-tooltip placement="left-start" trigger="hover">
        <template #trigger>
          <span class="quit" @click="logout"><svg xmlns="http://www.w3.org/2000/svg" width="2em"
              height="2em" viewBox="0 0 1024 1025">
              <path fill="currentColor"
                d="M896 1025H448q-53 0-90.5-37.5T320 897v-64q0-27 18.5-45.5t45-18.5t45.5 18.5t19 45t18.5 45.5t45.5 19h256q26 0 45-19t19-45V192q0-26-19-45t-45-19H512q-27 0-45.5 19T448 192.5T429 238t-45.5 19t-45-19t-18.5-46v-64q0-53 37.5-90.5T448 0h448q53 0 90.5 37.5T1024 128v769q0 53-37.5 90.5T896 1025M704 384q26 0 45 19t19 45v129q0 26-19 45t-45 19H256v101q0 11-13.5 19t-32 7t-29.5-12L18 556Q0 538 0 512.5T18 469l163-200q11-11 29.5-11.5t32 7.5t13.5 20v99z" />
            </svg></span>
        </template>
        有空再聊，再见！
      </n-tooltip>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getCurrentInstance, computed, ComponentInternalInstance } from "vue";
import { useMainStore } from "../store/index";
const store:any = useMainStore();
import Conversition from "../class/Conversition";
const { proxy } = getCurrentInstance() as ComponentInternalInstance;

// 切换菜单栏
function tabClick(id: number) {
  if (store.navId != id) {
    store.navId = id;
  }
}

function logout() {
  store.logout();
  proxy.$router.replace({
    name: "Home",
  });
}

// 获取未读消息数量
const getUnReadCount = computed(() => {
  return (navId: Number) => {
    if (navId != 1) return 0;
    let currentContent = store.conversitionList.filter(
      (x: Conversition) => x.ReciverId == store.sender.Id && !x.ReadFlag
    );
    return currentContent.length > 999 ? "999+" : currentContent.length;
  };
});
</script>

<style scoped lang="less">
.nav {
  height: 100%;
  width: 6%;
  position: relative;
  background-color: #4CAF50;
  /* 更改背景颜色 */
  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
  /* 添加阴影 */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 0;

  .close {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    .icon-guanji {
      font-size: 24px;
      color: #fff;
      background: rgba(0, 0, 0, 0.1);
      border-radius: 50%;
      padding: 8px;
      cursor: pointer;
      transition: background-color 0.3s;

      &:hover {
        background: rgba(0, 0, 0, 0.2);
      }
    }
  }

  .nav-my {
    height: auto;
    width: 100%;
    margin-bottom: 24px;

    .nav-my-img {
      height: 48px;
      width: 48px;
      border-radius: 50%;
      border: 2px solid #fff;
    }
  }

  .nav-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;

    /deep/ .n-badge {
      display: block;
    }

    .nav-item {
      height: 56px;
      width: 100%;
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 16px;
      border-radius: 8px;
      transition: background-color 0.3s;

      &:hover {
        background-color: rgba(255, 255, 255, 0.1);
      }

      li {
        font-size: 24px;
        color: #fff;
        width: 30px;
        height: 30px;
        line-height: 30px;
      }
    }

    .nav-select {
      background-color: rgba(255, 255, 255, 0.2);
    }
  }
}
</style>